<template>
	<div class="wapper">
		<!--<swiper :options="swiperOption" v-if="list.length">-->
		<swiper :options="swiperOption" v-if="showSwiper">
			<!-- slides -->
			<!--<swiper-slide v-for="item of swiperList" :key="item.id">-->
			<swiper-slide v-for="item of list" :key="item.id">
				<img class="swiper-img" :src="item.imageUrl" />
			</swiper-slide>
<!--swiper-pagination-bullet-active-->
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: 'HomeSwiper',
		
		props: {
			list: Array
		},
		
		data(){
			return {
				swiperOption: {
					pagination: '.swiper-pagination',
					loop: true,
					atuoplay: true
				},
				
/*				swiperList: [
					{
						id: "i001",
						imageUrl: "https://f12.baidu.com/it/u=2023139141,1707105597&fm=72"
					}, 
					{
						id: "i002",
						imageUrl: "http://img3.imgtn.bdimg.com/it/u=810305017,444305798&fm=26&gp=0.jpg"
					}, 
					{
						id: "i003",
						imageUrl: "http://img1.imgtn.bdimg.com/it/u=2181743376,2682076895&fm=26&gp=0.jpg"
					}, 
					{
						id: "i004",
						imageUrl: "http://img3.imgtn.bdimg.com/it/u=922044969,2539919700&fm=26&gp=0.jpg"
					},
					{
						id: "i005",
						imageUrl: "http://img4.imgtn.bdimg.com/it/u=1188601749,4202141027&fm=26&gp=0.jpg"
					}
				]*/
			}
		},
		
		computed: {
			showSwiper () {
				return this.list.length
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.wapper >>> .swiper-pagination-bullet
		background: #fff
	.wapper
		overflow: hidden
		width: 100%
		height: 0rem
		padding-bottom: 31.25%
		background: #eee
		.swiper-img
			width: 100%
			height: 31.25vw
</style> 